<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .wrapper1 {
        width: 500px;
        height: 500px;
        background-color: skyblue;
        /* position: relative; */
      }
      .box1 {
        position: page;
        top: 15px;
        width: 300px;
        height: 300px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="wrapper1">
      <div class="box1"></div>
    </div>
  </body>
  <script>
    // const wrapper = document.querySelector(".wrapper");
    // const box1 = document.querySelector(".box1");
    // warpper.addEventListener("mouseover", (event) => {
    //   event.stopPropagation();
    //   console.log("mouseover to warpper");
    // });
    // warpper.addEventListener("mouseenter", () => {
    //   console.log("mouseenter to warpper");
    // });
    // wrapper.addEventListener("click", (event) => {
    //   console.log("click wrapper");
    // });
    // box1.addEventListener("click", () => {
    //   //   event.stopPropagation();
    //   console.log("click box1");

    // });
    // console.log(1);
    // console.log(2);
    // Promise.resolve("a").then("b").then(Promise.resolve("c")).then(console.log);
    // console.log(["1", "0", "1", "3"].map(parseInt));
    // Promise.resolve("a")
    //   .then(() => {})
    //   .then((res) => {
    //     console.log(res);
    //   });
    // var foo = "foo";
    // var boo = "boo";
    // var a = 123;

    // function myfun() {
    //   // console.log(a)
    //   return foo + boo;
    // }
    // console.log(myfun());
    // 测试函数
    // function test(a, b, c) {
    //   console.log(this);
    //   console.log(a, b, c);
    //   return "哈哈";
    // }
    // const obj = {
    //   name: "我变了",
    // };
    // // 原生bind
    // const bindResult = test.bind(obj, 1, 2, 3)();
    // // 手写bind
    // Function.prototype.myBind = function () {
    //   const self = this;
    //   const arg = [...arguments];
    //   const obj = arg.shift();
    //   return function () {
    //     return self.call(obj, ...arg);
    //   };
    // };
    // const myBindResult = test.myBind(obj, 1, 2, 3)();
    // console.log("bindResult", bindResult);
    // console.log("myBindResult", myBindResult);
    // // 手写一个深拷贝
    // function deepClone(obj) {
    //   let init = Array.isArray(obj) ? [] : {};
    //   if (typeof obj !== "object") {
    //     return obj;
    //   }
    //   for (let i in obj) {
    //     if (obj[i] && typeof obj[i] === "object") {
    //       init[i] = deepClone(obj[i]);
    //     } else {
    //       init[i] = obj[i];
    //     }
    //   }
    //   return init;
    // }
    // 测试数据
    // const test = [1, 2, 3, [4, 5, [6], [7]]];
    // // 手写数组扁平化
    // function flatten(arr) {
    //   let result = [];
    //   for (let i of arr) {
    //     if (Array.isArray(i)) {
    //       result = [...result, ...flatten(i)];
    //     } else {
    //       result = [...result, i];
    //     }
    //   }
    //   return result;
    // }
    // console.log(flatten(test));
    // 观察者模式的简单实现
    // 被观察者
    // class Subject {
    //   listen = new Set();
    //   constructor(name) {
    //     this.name = name;
    //     this.status = "开心";
    //     this.observers = [];
    //   }
    //   // 存储观察者方法
    //   attach(observer) {
    //     this.observers.push(observer);
    //   }
    //   // 修改状态
    //   updateStatus(status) {
    //     this.status = status;
    //     // 通知观察者
    //     this.observers.forEach((oberver) => {
    //       oberver.update(this);
    //     });
    //   }
    // }
    // // 观察者
    // class Observer {
    //   constructor(name) {
    //     this.name = name;
    //   }
    //   update(subject) {
    //     console.log(
    //       `${this.name}:${subject.name}当前的状态是${subject.status}`
    //     );
    //   }
    // }
    // let baby = new Subject("宝宝");
    // let fater = new Observer("爸爸");
    // let mother = new Observer("妈妈");
    // baby.attach(fater);
    // baby.attach(mother);
    // baby.updateStatus("不开心");
    // setTimeout(() => {
    //   baby.updateStatus("伤心");
    // }, 2000);
    // const listener = new Map();
    // listener.set("name", "张三");
    // const test = listener.get("name");
    // test.add("李四");
    // console.log(test);
    let i;
    for (i = 0; i < 3; i++) {
      const log = () => {
        console.log(i);
      };
      log();
      setTimeout(log, 100);
    }
  </script>
</html>
